<template>
  <!-- 首页查看会议分享链接 -->
  <div :class="{'share_url':true, phone_p: isPhone}">
    <div class="title">会议分享链接</div>
    <div :class="{'tip_box':true, phone_p: isPhone}">
      <vue-qr :text='tokenModel' :size='130'></vue-qr>
      <div :class="{'tips':true, phone_p: isPhone}">
        <h2>1.令牌直接加入模式</h2>
        <div class="tip_con">
          【联信UMRTC视频会议服务】点击链接
          <a :href="tokenModel" target="_blank" rel="noopener norefferrer">{{tokenModel}}</a> ，在Google Chrome、Firefox及兼容的浏览器打开即时参与视频对话或会议。
          <span class="copy_btn" @click="copyText(tokenCopyVal)">复制</span>
        </div>
      </div>
    </div>
    <div :class="{'tip_box':true, phone_p: isPhone}">
      <vue-qr :text='pwdJoinModel' :size='130'></vue-qr>
      <div :class="{'tips':true, phone_p: isPhone}">
        <h2>2.密码加入模式</h2>
        <div class="tip_con">
          【联信UMRTC视频会议服务】点击链接
          <a :href="pwdJoinModel" target="_blank" rel="noopener norefferrer">{{pwdJoinModel}}</a> ，在Google Chrome、Firefox及兼容的浏览器打开，输入参会密码【{{roompwd}}】。
          <span class="copy_btn" @click="copyText(pwdJoinCopyVal)">复制</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vueQr from 'vue-qr'

export default {
    name: "shareurl",
    data() {
      return {
        isPhone: navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i),
        tokenCopyVal: '', // 令牌直接加入模式 复制的value
        pwdJoinCopyVal: '' // 密码加入模式 复制的value
      }
    },

    components: {
      vueQr
    },

    props: ['tokenModel', 'pwdJoinModel', 'roompwd'],

    watch: {
      tokenModel (val) {
        if (val) {
          this.tokenCopyVal = `【联信UMRTC视频会议服务】点击链接 ${this.tokenModel} ，在Google Chrome、Firefox及兼容的浏览器打开即时参与视频对话或会议。`
          this.pwdJoinCopyVal = `【联信UMRTC视频会议服务】点击链接 ${this.pwdJoinModel} ，在Google Chrome、Firefox及兼容的浏览器打开，输入参会密码【${this.roompwd}】。`
        }
      }
    },

    methods: {
      /** 复制 */
      copyText (val) {
        var type = '', msgText = ''
        let pro = new Promise(resolve => {
          this.$copyText(val).then(function (e) {
            type = 'success'
            msgText = '复制成功！'
            resolve()
          }, function (e) {
            type = 'error',
            msgText = `复制失败！${e}`
            resolve()
          })
        })
        pro.then(() => {
          this.$notify({
            title: '提示',
            type: type,
            message: msgText
          })
        })
      }
    }
};
</script>

<style lang="scss" scoped>
.share_url{
  width: 100%;
  padding: 20px 0;
  .title {
    color: #333333;
    font-size: 16px;
  }
  h2 {
    color: #333;
    font-size: 16px;
  }
  .tip_box {
    display: flex;
    align-items: center;
    flex: 1;
  }
  .tips{
    font-size: 12px;
    display: flex;
    flex-direction: column;
    text-align: left;
    .tip_con {
      margin-top: 10px;
    }
  }
  .copy_btn {
    color: #2e9cf1;
    cursor: pointer;
  }
}
.phone_p {
  flex-direction: column;
  align-items: center;
  text-align: center;
  word-break: break-all;
}
</style>
